<template>
  <BaseTable
    ref="baseTableRef"
    :apiUrl="getVmList"
    :isShowAddBtn="false"
    placeholder="请输入ip地址"
    :columns="vmcolumns"
    :isRowSelection="isRowSelection"
    :height="height"
    :showFilter="showFilter"
    :isPadding0="isPadding0"
    :showSetColumn="showSetColumn"
    :filterColumns="filterColumns"
    :filterList="filterList"
    @handleSelectionChange="handleSelectionChange"
    @handleSubFilter="handleSubFilter"
  >
    <template #operatBtns v-if="showOperatBtns">
      <mutilOptBtn :selectedKeys="selectedKeys" />
    </template>
    <template #name="{ record }">
      <LinkText
        :isEdit="showOperatBtns"
        :labelStyle="showOperatBtns ? { color: '#0f5ef7', cursor: 'pointer' } : null"
        :label="record?.name"
        :desc="record?.instanceName"
        @click="showOperatBtns ? $refs.vmDetailRef.open(record) : null"
        @handleEditDesc="$refs.editInstanceNameRef.open(record)"
      />
    </template>
    <template #flavor="{ record }">
      <ga-tooltip position="top" :content-style="{ maxWidth: '520px' }">
        <template #content>
          <p v-html="VMSpecsFormat(record?.flavorDetail)"></p>
          <!-- <p v-for="item in record?.flavorDescription" :key="item">{{ item }}</p> -->
        </template>
        <ga-link :hoverable="false">{{ record?.flavor }}</ga-link>
      </ga-tooltip>
    </template>
    <template #action="{ record }" v-if="showOperatBtns">
      <actionOpt
        :record="record"
        @fetchData="$refs.baseTableRef.fetchData()"
        @handleFindPassword="$refs.findPasswordRef.open(record)"
        @handleDestroyVm="$refs.destroyVmRef.open(record)"
        @handleEditTag="$refs.editTagRef.open(record)"
        @handleCreateSnapshot="$refs.createSnapshotRef.open(record)"
        @handleUpdateConfig="$refs.updateConfigRef.open(record)"
        @handleDiskExpansion="$refs.diskExpansionRef.open(record)"
        @handleAddDisk="$refs.addDiskRef.open(record)"
        @handleMigrate="$refs.migratekRef.open(record)"
        @handleNetCardConfig="$refs.netCardConfigRef.open(record)"
        @handleCreateImage="$refs.createImageRef.open(record)"
        @handleBindImage="$refs.bindImageRef.open(record)"
        @handleInstallAgent="$refs.installAgentRef.open(record)"
        @handleRegisterBastion="$refs.registerBastionRef.open(record)"
      />
    </template>
    <template #action="{ record }" v-else>
      <ga-link :hoverable="false" status="danger">移除</ga-link>
    </template>
  </BaseTable>
  <findPassword ref="findPasswordRef" @fetchData="$refs.baseTableRef.fetchData()" />
  <destroyVm ref="destroyVmRef" @fetchData="$refs.baseTableRef.fetchData()" />
  <editTag ref="editTagRef" @fetchData="$refs.baseTableRef.fetchData()" />
  <createSnapshot ref="createSnapshotRef" @fetchData="$refs.baseTableRef.fetchData()" />
  <updateConfig ref="updateConfigRef" @fetchData="$refs.baseTableRef.fetchData()" />
  <diskExpansion ref="diskExpansionRef" @fetchData="$refs.baseTableRef.fetchData()" />
  <addDisk ref="addDiskRef" @fetchData="$refs.baseTableRef.fetchData()" />
  <migrate ref="migratekRef" @fetchData="$refs.baseTableRef.fetchData()" />
  <netCardConfig ref="netCardConfigRef" @fetchData="$refs.baseTableRef.fetchData()" />
  <createImage ref="createImageRef" @fetchData="$refs.baseTableRef.fetchData()" />
  <bindImage ref="bindImageRef" @fetchData="$refs.baseTableRef.fetchData()" />
  <bindImage ref="bindImageRef" @fetchData="$refs.baseTableRef.fetchData()" />
  <installAgent ref="installAgentRef" @fetchData="$refs.baseTableRef.fetchData()" />
  <registerBastion ref="registerBastionRef" @fetchData="$refs.baseTableRef.fetchData()" />
  <editInsName ref="editInstanceNameRef" @fetchData="$refs.baseTableRef.fetchData()" />
  <vmDetail ref="vmDetailRef" @fetchData="$refs.baseTableRef.fetchData()" />
</template>

<script setup>
import { onMounted, reactive, ref, computed } from "vue";
import LinkText from "@/components/LinkText/index.vue";
import { VMSpecsFormat } from "@/utils";
import { getVmList } from "@/api/vm";
import { columns } from "./columns";
import mutilOptBtn from "./mutilOptBtn.vue";
import actionOpt from "./actionOpt.vue";
import vmDetail from "./components/vmDetail/index.vue";
import editInsName from "./components/actions/editInstanceName.vue";
import findPassword from "./components/actions/findPassword.vue";
import destroyVm from "./components/actions/destroyVm.vue";
import editTag from "./components/actions/editTag.vue";
import createSnapshot from "./components/actions/createSnapshot.vue";
import updateConfig from "./components/actions/updateConfig.vue";
import diskExpansion from "./components/actions/diskExpansion.vue";
import addDisk from "./components/actions/addDisk.vue";
import migrate from "./components/actions/migrate.vue";
import netCardConfig from "./components/actions/NetCardConfig.vue";
import createImage from "./components/actions/createImage.vue";
import bindImage from "./components/actions/bindImage.vue";
import installAgent from "./components/actions/installAgent.vue";
import registerBastion from "./components/actions/registerBastion.vue";

defineProps({
  vmcolumns: {
    type: Array,
    default: () => columns,
  },
  showOperatBtns: {
    type: Boolean,
    default: true,
  },
  isRowSelection: {
    type: Boolean,
    default: true,
  },
  height: {
    type: String,
    default: "calc(100vh - 180px)",
  },
  // 是否有高级筛选
  showFilter: {
    type: Boolean,
    default: false,
  },
  // 是否显示列设置
  showSetColumn: {
    type: Boolean,
    default: false,
  },
  // 是否padding0
  isPadding0: {
    type: Boolean,
    default: false,
  },
});
const selectedKeys = ref([]);
const baseTableRef = ref();
const reset = () => {
  selectedKeys.value = [];
  baseTableRef.value.selectedIds = [];
};
// 处理handleSelectionChange方法
const emit = defineEmits(["handleSelectionChange"]);
const handleSelectionChange = (val) => {
  selectedKeys.value = val;
  emit("selectionChange", val);
};
const filterColumns = [
  {
    title: "状态",
    dataIndex: "status",
  },
  {
    title: "平台",
    dataIndex: "name",
  },
];
const filterList = reactive({
  name: {
    symbol: [
      { value: "=", label: "等于", expr: "_contain" },
      { value: "!=", label: "不等于", expr: "_uncontain" },
    ],
    type: "input",
  },
  status: {
    symbol: [
      { value: "1", label: "=", expr: "_xxxx" },
      { value: "0", label: "!==", expr: "_yyyy" },
    ],
    type: "select",
    option: [
      { value: "xx", label: "正常" },
      { value: "dj", label: "异常" },
      { value: "ss", label: "警告" },
    ],
  },
  createBy: {
    symbol: [
      { value: "11", label: "等于", expr: "_start" },
      // { value: "10", label: "大于", expr: "_end" },
    ],
    type: "input",
    // format: "YYYY:MM:DD",
  },
});
// 高级搜索方法
const handleSubFilter = (val) => {
  console.log("高级搜索方法", val);
};
defineExpose({ reset });
</script>

<style lang="scss" scoped></style>
